{% extends "card/card-base.jinja" %}
{% block title %}选择请柬风格{% endblock %}
{% block css %},card-setting.css{% endblock %}
{% block pagetype %}card{% endblock %}

{% block main %}
    <div class="layout" id="card-panel">
        <input type="hidden" value="{{card_data.id}}" id="card-id" />
        <div class="card-panel">
            <div class="cp-item card-maker" id="card-maker">
                <div class="cm-theme">
                    <a href="javascript:;" class="cmt-top" data-action="top"></a>
                    <ul id="cm-themebox"></ul>
                    <a href="javascript:;" class="cmt-bottom" data-action="bottom"></a>
                </div>
                <div class="cm-box">
                    <div class="cmb-content">
                        <img id="theme-img" src="http://s.lovewith.me/static/images/blank.gif" />
                    </div>
                    <div class="cmb-envelope">
                        <img id="envelope-img" src="http://s.lovewith.me/static/images/blank.gif" />
                    </div>
                    <div class="cmb-stamp">
                        <img class="stamp-img" id="stamp-img" src="http://s.lovewith.me/static/images/blank.gif" />
                        <img class="stamp-cover" id="stamp-cover" src="http://s.lovewith.me/static/images/blank.gif" />
                    </div>
                </div>
                <div class="cm-style">
                    <dl class="cms-item" id="cm-envelope"></dl>
                    <dl class="cms-item" id="cm-shade"></dl>
                    <dl class="cms-item" id="cm-stamp"></dl>
                </div>
            </div>

            <div class="cp-item card-data" id="card-data" data-edit="{% if card_data%}1{%endif%}">
                <div class="cd-cover" id="cd-cover">
                </div>
                <div class="cd-main">
                    <ul>
                        <li class="clearfixed">
                            <label>我</label>
                            <input size="23" type="text" name="role" class="inp-text role-user" placeholder="请输入您的名字" value="{{wedding_data.bride}}" />
                            <label class="ui-a inp-select">
                                <select name="card-role" id="cdm-user-role">
                                    <option value="2" selected>新娘</option>
                                    <option value="1">新郎</option>
                                </select>
                            </label>
                            <span class="ui cdm-status"></span>
                        </li>
                        <li class="clearfixed">
                            <label>另一半</label>
                            <input size="23" type="text" name="role" class="inp-text role-user" placeholder="请输入另一半的名字" value="{{wedding_data.bridegroom}}" />
                            <label class="ui-a inp-select">
                                <select name="card-role" id="cdm-other-role">
                                    <option value="1" selected>新郎</option>
                                    <option value="2">新娘</option>
                                </select>
                            </label>
                            <span class="ui cdm-status"></span>
                        </li>
                        <li class="clearfixed">
                            <label>时间</label>
                            <input size="23" type="text" name="date" class="inp-text cd-datepicker" placeholder="请选择婚礼时间" data-default="{{wedding_data.wedding_date}}" value="" readonly />
                            <label class="ui-a inp-select">
                                <select name="card-time-hour" id="card-time-hour" data-default="{{wedding_data.wedding_time|default('')}}">
                                    <option value="">时</option>
                                        <option value="01">01</option>
                                        <option value="02">02</option>
                                        <option value="03">03</option>
                                        <option value="04">04</option>
                                        <option value="05">05</option>
                                        <option value="06">06</option>
                                        <option value="07">07</option>
                                        <option value="08">08</option>
                                        <option value="09">09</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">13</option>
                                        <option value="14">14</option>
                                        <option value="15">15</option>
                                        <option value="16">16</option>
                                        <option value="17">17</option>
                                        <option value="18">18</option>
                                        <option value="19">19</option>
                                        <option value="20">20</option>
                                        <option value="21">21</option>
                                        <option value="22">22</option>
                                        <option value="23">23</option>
                                        <option value="24">24</option>
                                    </optgroup>
                                </select>
                            </label>
                            <label class="ui-a inp-select">
                                <select name="card-time-minutes" id="card-time-minutes" data-default="{{wedding_data.wedding_time|default('')}}">
                                    <option value="">分</option>
                                    <option value="00">00</option>
                                    <option value="01">01</option>
                                    <option value="02">02</option>
                                    <option value="03">03</option>
                                    <option value="04">04</option>
                                    <option value="05">05</option>
                                    <option value="06">06</option>
                                    <option value="07">07</option>
                                    <option value="08">08</option>
                                    <option value="09">09</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option value="13">13</option>
                                    <option value="14">14</option>
                                    <option value="15">15</option>
                                    <option value="16">16</option>
                                    <option value="17">17</option>
                                    <option value="18">18</option>
                                    <option value="19">19</option>
                                    <option value="20">20</option>
                                    <option value="21">21</option>
                                    <option value="22">22</option>
                                    <option value="23">23</option>
                                    <option value="24">24</option>
                                    <option value="25">25</option>
                                    <option value="26">26</option>
                                    <option value="27">27</option>
                                    <option value="28">28</option>
                                    <option value="29">29</option>
                                    <option value="30">30</option>
                                    <option value="31">31</option>
                                    <option value="32">32</option>
                                    <option value="33">33</option>
                                    <option value="34">34</option>
                                    <option value="35">35</option>
                                    <option value="36">36</option>
                                    <option value="37">37</option>
                                    <option value="38">38</option>
                                    <option value="39">39</option>
                                    <option value="40">40</option>
                                    <option value="41">41</option>
                                    <option value="42">42</option>
                                    <option value="43">43</option>
                                    <option value="44">44</option>
                                    <option value="45">45</option>
                                    <option value="46">46</option>
                                    <option value="47">47</option>
                                    <option value="48">48</option>
                                    <option value="49">49</option>
                                    <option value="50">50</option>
                                    <option value="51">51</option>
                                    <option value="52">52</option>
                                    <option value="53">53</option>
                                    <option value="54">54</option>
                                    <option value="55">55</option>
                                    <option value="56">56</option>
                                    <option value="57">57</option>
                                    <option value="58">58</option>
                                    <option value="59">59</option>
                                </select>
                            </label>
                            <span class="ui cdm-status"></span>
                        </li>
                        <li class="clearfixed cm-address">
                            <label>地点</label>
                            <input size="6" type="text" id="card-city" class="inp-text cm-city" value="{{wedding_data.city}}" size="10" />
                            <input size="34" maxlength="100" type="text" id="card-address" class="inp-text" name="address" placeholder="请输入婚礼地点" value="{{wedding_data.address|default('')}}" />
                            <span class="ui cdm-status"></span>
                            <a href="javascript:;" class="cm-map-btn {%if card_data.map_point%}inp-btn-pk{%else%}inp-btn-gray{%endif%}" id="ccm-map" data-point="{{card_data.map_point}}">地图定位</a>
                        </li>
                        <li class="clearfixed">
                            <label>邀请语</label>
                            <textarea class="inp-atext" name="content" placeholder="请输入您的邀请语">{{card_data.content}}</textarea>
                        </li>
                        <li class="clearfixed cm-permission">
                            <label>权限</label>
                            <label class="ui-a inp-select">
                                <select name="card-permission" id="cdm-permission">
                                    <option value="1">所有人可见</option>
                                    <option value="2" selected>仅邀请者可见</option>
                                </select>
                            </label>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="cp-item card-content card-content-loading" id="card-content">
                <h4>增加卡片</h4>
                <div class="cc-item">
                    <ul>
                        {% for p in card_post%}
                        <li id="card-post-{{p.id}}" data-pid="{{p.id}}">
                            {% if p.media %}
                                <div class="cci-content">
                                    <img width="240" src="http://s.lovewith.me/static/images/blank.gif" data-src="{{p.media}}">
                                </div>
                            {% else %}
                                <h2>{{p.title}}</h2>
                                <div class="cci-content">
                                    <p><textarea>{{p.content}}</textarea></p>
                                </div>
                            {% endif %}
                            <div class="cci-option">
                                <a class="ui-a ui-del" href="javascript:;">删除</a>
                                {% if not p.media %}
                                <a class="ui-a ui-edit" href="javascript:;">编辑</a>
                                {% endif %}
                            </div>
                        </li>
                        {% endfor %}
                        <li class="cci-addpic">
                            <div class="cci-content">
                                <span class="cci-percent" id="cci-percent"></span>
                                <a class="inp-btn-pk ccia-btn-pic" href="javascript:;">增加图片卡</a>
                            </div>
                        </li>
                        <li class="cci-addtxt">
                            <div class="cci-content">
                                <a class="inp-btn-pk ccia-btn-txt" href="javascript:;">增加文字卡</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="cp-item card-invite" id="card-invite">
                <div class="ci-info" id="ci-info"></div>
                <div class="ci-main">
                    <div class="cim-title" id="cim-title">
                        <h3>发送给朋友</h3>
                        <div class="cim-add">
                            <a href="javascript:;" class="inp-btn-gray cim-by-email">增加邮箱好友</a>
                            <a href="javascript:;" class="inp-btn-gray" id="cim-qwb">邀请腾讯微博好友</a>
                            <a href="javascript:;" class="inp-btn-gray" id="cim-sina">邀请新浪微博好友</a>
                            <a href="javascript:;" class="inp-btn-gray" id="cim-save">保存列表</a>
                            <a href="javascript:;" class="inp-btn-pk cim-send">发送</a>
                        </div>
                    </div>
                    <div class="cim-empty" {% if invite_data %}style="display:none;"{% endif %}>尚未添加朋友</div>
                    <div id="ci-main-table" class="cim-table" {% if invite_data %}style="display:block;"{% endif %}>
                        <table>
                            <thead>
                                <tr>
                                    <th align="center" width="23"><input id="cim-select-all" class="inp-checkbox" type="checkbox" name="" /></th>
                                    <th width="150" id="sort-col" data-sort="custom" data-sort-default="asc">姓名</th>
                                    <th width="123">邀请方式</th>
                                    <th width="140">Email</th>
                                    <th width="90"></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for i in invite_data %}
                                    <tr data-send="{{i.is_send}}" data-type="{{i.invite_type}}" data-uid="{{i.user_id}}" id="user-{{i.user_id}}">
                                        <td align="center">
                                            <input class="inp-checkbox" type="checkbox" name="" />
                                        </td>
                                        <td><span class="sort-name">{{i.user_name}}</span><input type="text" name="name" value="{{i.user_name}}" class="inp-text"></td>
                                        <td>
                                            {% if i.invite_type == 'wb' %}新浪微博{%endif%}
                                            {% if i.invite_type == 'qq' %}腾讯微博{%endif%}
                                            {% if i.invite_type == 'email' %}邮箱{%endif%}
                                        </td>
                                        <td>{{i.user_email|default('/')}}</td>
                                        <td>
                                            {% if i.is_send == 1 %}
                                                <span class="ui-a cim-status cim-sended">已发送</span>
                                            {% else %}
                                                <span class="ui-a cim-status"></span>
                                            {% endif %}  
                                        </td>
                                        <td>
                                            <div class="cim-opt">
                                                <a class="ui invite-email" title="发送邀请" href="javascript:;"></a>
                                                <a class="ui del cim-delete" title="删除好友" href="javascript:;"></a>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="card-nav" id="card-nav">
        <div class="layout">
            <div class="cn-logo"><a href="{{domain}}" target="_blank"></a></div>
            <div class="cn-step">
                <ol>
                    <li data-index="0" class="active"><i>01</i><span>设计请柬</span></li>
                    <li data-index="1"><i>02</i><span>请柬详情</span></li>
                    <li data-index="2"><i>03</i><span>添加卡片</span></li>
                    <li class="cn-step-4" data-index="3"><i>04</i><span>发送请柬</span></li>
                </ol>
            </div>
            <div class="cn-btn">
                <a href="javascript:;" class="inp-btn-gray cn-step-view">预览</a>
                <a href="javascript:;" class="inp-btn-gray cn-prev">上一步</a>
                <a href="javascript:;" class="inp-btn-pk cn-next">下一步</a>
                <a target="_blank" href="{{domain}}u/subscribe/all/" title="{{user}}"><img class="avatar" alt="{{user}}" src="{{user.avatar}}!50" width="36" /></a>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
<script src="http://s.lovewith.me/static/js/page/post/edit/??ueditor.all.min.js,ueditor.config.js"></script>
<script src="//s.lovewith.me/static/js/page/card/openjs.js"></script>
<script src="http://mat1.gtimg.com/app/openjs/widget/friend_selector.js"></script>
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=2838777972" charset="utf-8"></script>
<script>seajs.use('page/card/setting', function(p){p.render('{% autoescape off %}{{card_data.card_config|replace('\\"', '\\\\"')|replace('\'', '\\\\"')}}{%endautoescape%}')});</script>
{% endblock %}